<template>
	<StatusBar></StatusBar>
	<view>
		<!--我的头像及信息-->
		<view>
			<portrait :url="portraitImg" :name="name" :sex="sex" @buttonClick=""></portrait>
		</view>

		<view>
			<mineItem1 url="/static/lvyou.png" title="打卡地点数" background="#3482ff" :num="postListLength"></mineItem1>
		</view>
		<view>
			<mineItem1 url="/static/dianzan.png" title="总点赞数" background="#5c56ee" :num="dianzanNumber"></mineItem1>
		</view>
		<!-- <view>
		    <mineItem1 url="/static/image/project/drillDetail.png" title="信息3" background="#f39d1c" @buttonClick=""></mineItem1>
		  </view> -->

		<!-- <uni-popup ref="tip">
      <view class="uni-tip">
        <text class="uni-tip-title">警告</text>
        <text class="uni-tip-content">确定退出登录？</text>
        <view class="uni-tip-group-button">
          <text class="uni-tip-button" @click="cancel()">取消</text>
          <text class="uni-tip-button" @click="confirm()">确定</text>
        </view>
      </view>
    </uni-popup> -->
	</view>

	<view style="display: flex;flex-direction: column;">

		<view style="
      font-weight: bold;
      font-size: 38rpx;
      display: flex;
      margin-left: 35rpx;
    ">

			<view style="
        width: 10rpx;
        height: 60rpx;
        background-color: #add8e6;
        margin-top: 25rpx;
      "></view>
			<view style="margin-left: 18rpx; margin-top: 31rpx;margin-bottom: 20rpx;"> 旅行地图 </view>
		</view>
		<view v-for="item in postList">
			<Travel :pictureUrl="item.image" :detailLocation="item.address" :creatTime="item.photoTime"></Travel>
		</view>

	</view>

	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="更改用户名" placeholder="请输入内容"
			@confirm="confirmName"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup lang="ts">
	import mineItem1 from '@/components/minePage/mine-item1.vue';
	import portrait from '@/components/minePage/portrait.vue';
	import Travel from '@/components/Travel/Travel.vue';
	import { request } from '../../service/request.js'
	import { ref, onMounted } from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	//头像
	const portraitImg = ref('../../static/test2.png')
	//用户id
	const sex = ref('96种性别')
	//用户名
	const name = ref('未命名用户')
	//用户电话
	const phone = ref('123456')
    const dianzanNumber=ref()
	const postList = ref([])
	const postListLength = ref()
    const getUserInfo=async()=>{
		let res = await request({
			url: '/user/userInfo',
			method: 'GET',
		})
		console.log(res)
		portraitImg.value=res.data.avatar
		
		let dianzanRes=await request({
			url:'/passage/getUserFollowNum',
			method:'POST'
		})
		console.log(dianzanRes)
		dianzanNumber.value=dianzanRes.data
		
	}
	
	const getTotalPosition=async()=>{
		let res = await request({
			url: '/user/userInfo',
			method: 'GET',
		})
		console.log('222',res)
		if(res.code==420)
		{
			   uni.clearStorage()
				uni.showToast({
					title: '请重新登陆',
					icon: "error"
				})
				uni.navigateTo({
					url: '/pages/login/login'
				})
			
		}
	}
	const getUserPassageList = async () => {
		let res = await request({
			url: '/passage/getUserPassageList',
			method: 'POST',
			data: {
				
			}
		})
		//console.log(res.data)
		postList.value = res.data
		postListLength.value=postList.value.length
	}

	onShow(() => {
		console.log(111)
		getUserInfo()
		getTotalPosition()
		getUserPassageList()
	})
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.notice {
		position: absolute;
		height: 80rpx;
		width: 80rpx;
		top: 50rpx;
		right: 50rpx;
		border-radius: 50%;
		background-color: #6163ec;
		z-index: 500;

		image {
			height: 100%;
			width: 100%;
		}
	}

	/* 提示窗口 */
	.uni-tip {
		display: flex;
		flex-direction: column;
		padding: 15px;
		width: 400rpx;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		margin-left: 105rpx;
		font-size: 14px;
		color: #666;
	}

	.uni-tip-group-button {
		display: flex;
		flex-direction: row;
		margin-top: 20px;
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>